<template>
    <div class="table">
        <center>
            <el-button type="primary" style="margin-right: 30px" @click="downloadCarInfo()">车辆信息下载</el-button>
            <el-button type="primary" @click="jumpTo" style="margin-bottom: 30px">新增车辆信息</el-button>
            <el-button type="primary" style="margin-left: 30px">车辆信息上传</el-button>
        </center>
        <!--        <el-select v-model="value" style="width: 150px" clearable  placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 120px" clearable disabled  placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 120px" clearable placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 120px" clearable placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 120px" clearable placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 150px" clearable placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 120px" clearable placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 120px" clearable placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 120px" clearable placeholder="请选择"/>-->
        <!--        <el-select v-model="value" style="width: 120px" clearable placeholder="请选择"/>-->

        <el-table
                :data="tableData"
                stripe
                border
                :default-sort="{prop: 'manufacturer', order: 'descending'}"
                height="400px"
                style="width: 90%;">
            <el-table-column
                    prop="carManufacturer"
                    sortable
                    :filters="filtersCarManufacturer"
                    :filter-method="filterHandler"
                    label="厂商"
                    width="150">
                <!--                <template slot="header">-->
                <!--                    <el-select placeholder="请选择"></el-select>-->
                <!--                    <span align="center">厂商</span>-->
                <!--                </template>-->
            </el-table-column>
            <el-table-column
                    prop="carGuidePrice"
                    sortable
                    label="指导价(w)"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="carNumber"
                    sortable
                    label="库存数量"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="carEnergyType"
                    :filters="filtersCarEnergyType"
                    :filter-method="filterHandler"
                    label="能源类型"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="carTimeToMarket"
                    label="上市时间"
                    width="120">
                <template slot-scope="scope">
                    <span>{{ timeFn(scope.row.carTimeToMarket) }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="carMaximumPower"
                    label="最大功(kw)"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="carBodyStructure"
                    label="车身结构"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="carAppearanceColor"
                    :filters="filtersCarAppearanceColor"
                    :filter-method="filterHandler"
                    label="外观颜色"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="carShiftingMode"
                    label="换挡形式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="carDriveMode"
                    label="驱动方式"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="carTransmissionType"
                    label="变速箱类型"
                    width="150">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="deleteCarInfoById(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next, total, jumper"
                :page-size="pageSize"
                :total="total"
                @current-change="current_change">
        </el-pagination>
    </div>
</template>

<script>
    import {SELECT_ALL_CAR_INFO} from "@/api/car/"
    import {DELETE_CAR_INFO_BY_ID} from "@/api/car/"
    import {SELECT_FILTER} from "@/api/car/"
    import {DOWNLOAD_CAR_INFO} from "@/api/car/"

    export default {
        name: "Car",
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                total: null,
                nextPage: 1,
                tableData: [],
                filtersCarManufacturer: [],
                filtersCarEnergyType: [],
                filtersCarAppearanceColor: [],
            }
        },
        created() {
            let pageNum = this.pageNum
            let pageSize = this.pageSize
            SELECT_ALL_CAR_INFO({pageNum, pageSize}).then(res => {
                this.tableData = res.data.data.list
                this.total = res.data.data.total
                this.nextPage = res.data.data.nextPage
            })
            SELECT_FILTER().then(res => {
                this.filtersCarManufacturer = res.data.data.carManufacturerList
                this.filtersCarEnergyType = res.data.data.carEnergyTypeList
                this.filtersCarAppearanceColor = res.data.data.appearanceColorList
            })
        },
        methods: {
            jumpTo() {
                this.$router.push('/car/addCar')
            },
            handleClick(row) {
                this.$router.push({path: '/car/editCar', query: row})
            },
            reFresh() {
                let pageNum = this.pageNum
                let pageSize = this.pageSize
                SELECT_ALL_CAR_INFO({pageNum, pageSize}).then(res => {
                    this.tableData = res.data.data.list
                    this.total = res.data.data.total
                    this.nextPage = res.data.data.nextPage
                })
            },
            current_change: function (nextPage) {
                let pageNum = nextPage
                let pageSize = this.pageSize
                SELECT_ALL_CAR_INFO({pageNum, pageSize}).then(res => {
                    this.tableData = res.data.data.list
                    this.total = res.data.data.total
                    this.nextPage = res.data.data.nextPage
                })
            },
            filterHandler(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            deleteCarInfoById(row) {
                this.$confirm('确认删除该车辆信息吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let carId = row.carId
                    DELETE_CAR_INFO_BY_ID({carId}).then(res => {
                        if (res.data.code === 5004) {
                            const loading = this.$loading({
                                lock: true,
                                text: 'Loading',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            setTimeout(() => {
                                loading.close();
                                this.reFresh()
                            }, 2000);
                            this.$message({
                                showClose: true,
                                message: res.data.message,
                                type: 'success'
                            });

                        } else {
                            this.$message({
                                showClose: true,
                                message: res.data.data,
                                type: 'warning'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                // let carId = row.carId
                // DELETE_CAR_INFO_BY_ID({carId}).then(res => {
                //     if (res.data.code === 5004) {
                //         const loading = this.$loading({
                //             lock: true,
                //             text: 'Loading',
                //             spinner: 'el-icon-loading',
                //             background: 'rgba(0, 0, 0, 0.7)'
                //         });
                //         this.$message({
                //             showClose: true,
                //             message: res.data.message,
                //             type: 'success'
                //         });
                //         setTimeout(() => {
                //             loading.close();
                //             this.reFresh()
                //         }, 2000);
                //     } else {
                //         this.$message({
                //             showClose: true,
                //             message: res.data.data,
                //             type: 'warning'
                //         });
                //     }
                // })
            },
            downloadCarInfo() {
                // DOWNLOAD_CAR_INFO().then(res => {
                // })
                window.location.href = 'http://10.50.10.104:9896/car/downloadCarInfo'
            },
            timeFn(carTimeToMarket) {
                Date.prototype.format = function (fmt) {
                    var o = {
                        "M+": this.getMonth() + 1,                 //月份
                        "d+": this.getDate(),                    //日
                        "h+": this.getHours(),                   //小时
                        "m+": this.getMinutes(),                 //分
                        "s+": this.getSeconds(),                 //秒
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                        "S": this.getMilliseconds()             //毫秒
                    };
                    if (/(y+)/.test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    }
                    for (var k in o) {
                        if (new RegExp("(" + k + ")").test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                        }
                    }
                    return fmt;
                }
                let time = new Date(carTimeToMarket).format('yyyy年MM月');
                return time;
            },
        }
    }
</script>

<style scoped>
    .table {
        margin-left: 10%;
    }

</style>